import { defineStore } from 'pinia'
import { shallowReactive } from 'vue'

const useAppStore = defineStore('app', () => {

  const layout = shallowReactive({
    currentLayout: 'Classic',
    isCollapse: false,
    showBreadCrumb: true,
    showTagsView: true,
    locale: 'zh-cn'
  })

  const toggleLocale = (localeName:string) => {
    layout.locale = localeName
  }

  const toggleIsCollapse = ()=>{
    layout.isCollapse = !layout.isCollapse
  }

  const toggleShowBreadCrumb = ()=>{
    layout.showBreadCrumb = !layout.showBreadCrumb
  }

  const toggleLayout = (name:string) =>{
    layout.currentLayout = name
  }
  return {
    layout,
    toggleLayout,
    toggleIsCollapse,
    toggleShowBreadCrumb,
    toggleLocale
  }
})

export default useAppStore
